<template>
	<div class="discount-container">
		<div class="discount-content" v-if="true">
			<div class="discount-item" v-for="item in list">
				<personal-discount-item type="used" :content="item"></personal-discount-item>
			</div>
		</div>
		<div class="discount-null" v-else>
			<div class="discount-null-illustration"></div>
			<div class="discount-null-text">
				{{ $t('message.noDiscount') }}
			</div>
		</div>
	</div>
</template>

<script>
import PersonalDiscountItem from '@/components/personal/discount/PersonalDiscountItem'

export default {
  name: 'PersonalDiscountUsed',
  components: {
    PersonalDiscountItem
  },
  data () {
    return {
      list: null
    }
  },
  methods: {
    getDiscount () {
      this.list = [
        {
          'price': 50,
          'detail': '滿100元可用（100减10）',
          'time': '2017-11-20'
        }
      ]
    }
  },
  mounted () {
    this.getDiscount()
  }
}
</script>

<style scoped>
.discount-content {
	overflow: hidden;
}

.discount-item {
	float: left;
	margin: 40px 40px 0 0;
}

.discount-null {
	padding-top: 100px;
}

.discount-null-illustration {
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background: url(../../../assets/images/personal/illustration_discount.png) no-repeat center;
}

.discount-null-text {
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	color: #666;
	text-align: center;
	margin-top: 10px;
}
</style>